<template>
    <div class="ele-body">
        <el-card shadow="never" body-style="padding:22px 22px 0 22px;">
            <!-- 搜索表单 -->
            <el-form ref="searchForm" :model="table.where" label-width="80px" @keyup.enter.native="$refs.table.reload()"
                    @submit.native.prevent>
                <el-row>
                    <el-col :md="5" :sm="12">
                        <el-form-item label="名称:" prop="name">
                        <el-input v-model="table.where.name" placeholder="请输入" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :md="5" :sm="12">
                        <el-form-item label="设备组:">
                            <el-select v-model="table.where.group_id" placeholder="请选择" clearable class="ele-fluid">
                                <el-option
                                    v-for="item in group_ids"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :md="4" :sm="12">
                        <el-form-item label="有效时间:">
                        <el-date-picker v-model="table.where.expires" type="date" placeholder="请选择"/>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4" :sm="12">
                        <el-form-item class="ele-text-left">
                        <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon" size="small">查询
                        </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card shadow="never">

            <!-- 表格工具栏 -->
            <div class="ele-table-tool">
                <div class="ele-table-tool-left">
                    <el-button @click="showEdit=true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">添加</el-button>
                </div>
            </div>

            <!-- 数据表格 -->
            <ele-data-table ref="table" :config="table" :choose.sync="choose" highlight-current-row>
                <el-table-column label="轮播图" align="center" min-width="110">
                    <template slot-scope="{row}">
                        <el-image style="width: 100px; height: 50px" :src="row.imgpath" @click="preview(row)"></el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="名称" show-overflow-tooltip min-width="100"/>
                <el-table-column prop="groupName" label="设备分组" show-overflow-tooltip min-width="135"/>
                <el-table-column prop="expires" label="有效时间" sortable show-overflow-tooltip min-width="80"/>

                <el-table-column label="操作" align="center" min-width="160" fixed="right">
                    <template slot-scope="{row}">
                        <el-button @click="edit(row)" icon="el-icon-edit" type="primary" size="mini">修改</el-button>
                        <el-button @click="remove(row)" icon="el-icon-delete" type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </ele-data-table>

        </el-card>

        <!-- 编辑弹窗 -->
        <el-dialog :title="editForm.id ? '修改轮播图': '添加轮播图'" :visible.sync="showEdit" width="600px"
                @closed="editForm={}" :destroy-on-close="true" :lock-scroll="false">

            <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="82px" @submit.native.prevent>

                <el-form-item label="名称:" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入轮播图名称" clearable/>
                </el-form-item>

                <el-form-item label="设备组:" prop="group_id">
                    <el-select v-model="editForm.group_id" placeholder="请选择" clearable multiple class="ele-fluid">
                        <el-option
                            v-for="item in group_ids"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="轮播图:">
                    <el-upload
                        :action="$http.defaults.baseURL + '/api/upload/file'"
                        list-type="picture-card"
                        name="image"
                        :on-success="uploadSuccess">
                            <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                            >
                            <span class="el-upload-list__item-actions">
                                <span
                                class="el-upload-list__item-preview"
                                @click="handlePictureCardPreview(file)"
                                >
                                <i class="el-icon-zoom-in"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="有效时间:" prop="expires">
                    <el-date-picker v-model="editForm.expires" type="date" placeholder="请选择有效时间"></el-date-picker>
                </el-form-item>

                <el-form-item label="排序号:" prop="sort">
                    <el-input-number v-model="editForm.sort" controls-position="right" :min="0" placeholder="请输入排序号" class="ele-fluid ele-text-left"/>
                </el-form-item>

            </el-form>

            <div slot="footer">
                <el-button @click="showEdit=false">取消</el-button>
                <el-button type="primary" @click="save" :loading="editLoading">保存</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="dialogImageUrl2" alt="">
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "Carousel",
    data() {
        return {
            table: { // 表格配置
                url: '/api/admin/device/carousel',
                where: {}
            },
            choose: [],  // 表格选中数据
            editForm: {}, // 编辑弹窗数据
            editRules: {  // 编辑弹窗表单验证规则
                name: [
                    {required: true, message: '请输入轮播图名称', trigger: 'blur'}
                ],
                group_id: [
                    {required: true, message: '请选择设备组', trigger: 'blur'}
                ],
                expires: [
                    {required: true, message: '请选择有效时间', trigger: 'blur'}
                ],
                sort: [
                    {required: true, message: '请输入排序号', trigger: 'blur'}
                ]
            },
            group_ids: [],
            showEdit: false,             // 是否显示编辑弹窗
            editLoading: false,          // 编辑表单加载状态
            searchExpand: false,          // 搜索表单是否展开
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            dialogImageUrl2: '',
            dialogVisible2: false,
        }
    },

    created() {
        this.$http.post('/api/admin/device/device/group', {}).then(res => {
            if (res.data.code === 0) {
                this.group_ids = res.data.data;
            } else {
                this.$message.error(res.data.msg);
            }
        }).catch(e => {
            this.$message.error(e.message);
        });
    },

    methods: {
        save() {
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({lock: true});
                    this.$http.post(this.editForm.id ? '/api/admin/device/carousel/edit' : '/api/admin/device/carousel/add', this.editForm).then(res => {
                        loading.close();
                        if (res.data.code === 0) {
                            this.showEdit = false;
                            this.$message({type: 'success', message: res.data.msg});
                            this.$refs.table.reload();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(e => {
                        loading.close();
                        this.$message.error(e.message);
                    });
                } else {
                    return false;
                }
            });
        },

        edit(row) {
            this.editForm = Object.assign({}, row);
            this.editForm.group_id = row.groupArr;
            this.editForm.imgpath = '';
            this.showEdit = true;
        },

        remove(row) {
            this.$confirm('确定要删除该轮播图吗?', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/admin/device/carousel/delete?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        preview(row) {
            this.dialogImageUrl2 = row.imgpath;
            this.dialogVisible2 = true;
        },

        uploadSuccess(res) {
            if (res.code == 0) {
                this.editForm.imgpath = res.data.url;
                this.$message({type: 'success', message: '上传成功'});
            } else {
                this.$message({type: 'error', message: res.msg});
            }
        }
    }

}
</script>

<style scoped>

</style>